<template>
  <div class="partner">
    <p class="headline">合作伙伴</p>
    <p class="description">优秀的合作伙伴</p>
    <div class="partner-center">
      <div class="animation-wrapper">
        <ul class="entity">
          <li
            v-for="(item, index) in brandList"
            :key="index"
          ><img :src="item"></li>
        </ul>
        <ul class="clone">
          <li
            v-for="(item, index) in brandList"
            :key="index"
          ><img :src="item"></li>
        </ul>
      </div>
      <div class="left-mask"></div>
      <div class="right-mask"></div>
    </div>    
    <div class="join-now">
      <img :src="background">
      <div class="mask">
        <button themeColor>立即入驻</button>
      </div>
    </div>
  </div>
</template>

<script>
import cityshopLogo    from './../img/brank_logo/cityshop_logo.jpg'
import citysuperLogo   from './../img/brank_logo/citysuper_logo.jpg'
import drfLogo         from './../img/brank_logo/drf_logo.jpg'
import gsuperLogo      from './../img/brank_logo/gsuper_logo.jpg'
import itoLogo         from './../img/brank_logo/ito_logo.jpg'
import jdLogo          from './../img/brank_logo/jd_logo.jpg'
import jlfLogo         from './../img/brank_logo/jlf_logo.jpg'
import metroLogo       from './../img/brank_logo/metro_logo.jpg'
import lotusLogo       from './../img/brank_logo/lotus_logo.jpg'
import oleLogo         from './../img/brank_logo/ole_logo.jpg'
import snygLogo        from './../img/brank_logo/snyg_logo.jpg'
import takashimayaLogo from './../img/brank_logo/takashimaya_logo.jpg'
import taobaoLogo      from './../img/brank_logo/taobao_logo.jpg'
import tmLogo          from './../img/brank_logo/tm_logo.jpg'
import wrmLogo         from './../img/brank_logo/wrm_logo.jpg'
import wyLogo          from './../img/brank_logo/wy_logo.jpg'
import zgdfhkLogo      from './../img/brank_logo/zgdfhk_logo.jpg'
import zgsyLogo        from './../img/brank_logo/zgsy_logo.jpg'
import zshLogo         from './../img/brank_logo/zsh_logo.jpg'
import yhcsLogo        from './../img/brank_logo/yhcs_logo.png'
import background      from './../img/background.png'

export default {
  name: 'Partner',
  data () {
    return {
      brandList: [
        cityshopLogo,
        citysuperLogo,
        drfLogo,
        gsuperLogo,
        itoLogo,
        jdLogo,
        jlfLogo,
        metroLogo,
        lotusLogo,
        oleLogo,
        snygLogo,
        takashimayaLogo,
        taobaoLogo,
        tmLogo,
        wrmLogo,
        wyLogo,
        zgdfhkLogo,
        zgsyLogo,
        zshLogo,
        yhcsLogo
      ],
      background
    }
  }
}
</script>

<style lang="scss" scoped>
.partner {
  box-sizing: border-box;
  padding-top: 1rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .headline {
    font-size: .72rem;
  }
  .description {
    color: #666;
    margin-top: .2rem;
  }
  .partner-center {
    position: relative;
    width: 87.5%;
    height: 225px;
    margin: 1rem auto 0;
    overflow: hidden;
    .animation-wrapper {
      width: 4300px;
      height: 100%;
      display: flex;
      animation: move 25s linear infinite;
      ul {
        width: 50%;
        height: 100%;
        display: flex;
        align-content: space-between;
        flex-wrap: wrap;
        li {
          border: 1px solid #e6e6e6;
          width: 188px;
          height: 98px;
          margin: 0 12.5px;
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            margin: 0 auto;
          }
        }
      }
      &:hover {
        animation-play-state: paused;
      }
    }
    .left-mask, .right-mask {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 300px;
      background: #000;
    }
    .left-mask {
      left: 0;
      background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,1));

    }
    .right-mask {
      right: 0;
      background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
    }
  }
  .join-now {
    margin-top: 1rem;
    width: 100%;
    font-size: 0;
    position: relative;
    img {
      width: 100%;
    }
    .mask {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        width: 4rem;
        height: .96rem;
        background: #fff;
        font-size: .36rem;
      }
    }
  }
}
@keyframes move {
  from {margin-left: 0;}
  to {margin-left: -2150px;}
}
</style>